<template>
  <div class="feeBackBtn">
    <Button type="primary" v-if="[0].indexOf(feeBackInfo.refundOrderStatus) > -1" @click="showRequestModal = true" style="width:95px;height:35px;">
      <Icon type="ios-checkmark" style="margin-right: 5px" />退款审核
    </Button>
    <Modal
        v-model="showRequestModal"
        title="退款处理"
        :footer="null">
        <Form ref="formValidate" :model="formItem" :rules="formItemRule" :label-width="80">
            <FormItem label="处理方式：">
                退款
            </FormItem>
            <FormItem label="处理结果：">
                <RadioGroup v-model="formItem.orderStatus">
                    <Radio :label="4">同意退款</Radio>
                    <Radio :label="2">驳回</Radio>
                </RadioGroup>
            </FormItem>
            <template v-if="formItem.orderStatus === 4">
                <FormItem v-if="feeBackInfo.refundAmt" label="支付金额：">
                    {{feeBackInfo.refundAmt}}元
                </FormItem>
                <FormItem v-if="feeBackInfo.refundTradingChannels || feeBackInfo.refundTradingChannels === 0" label="支付方式：">
                    {{['微信', '支付宝', '线下支付'][feeBackInfo.refundTradingChannels]}}
                </FormItem>
            </template>
            <FormItem v-if="formItem.orderStatus === 2" label="驳回原因：" :prop="orderStatus" :rules="{required: true, message: '请填写驳回原因', trigger: 'change' }">
                <Input type="textarea" v-model="formItem.auditorReason" maxlength='200'/>
            </FormItem>
        </Form>
        <div slot="footer">
            <div class="btn-group" style="text-align:center">
                <Button style="width:75px;height:35px;" type="primary" @click="handleFeeBack" :disabled = 'disabled' class="btn">
                  <Icon type="ios-checkmark" style="margin-right: 5px" />确认
                </Button>
                <Button style="width:75px;height:35px;" @click="showRequestModal = false" class="btn">
                  <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>              
            </div>
        </div>
    </Modal>
  </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  name: '退费处理按钮',
  props: {
    onSuccess: [Function],
    id: [String],
    feeBackInfo: {
      type: Object,
      default: {
        refundAmt: null, // 退款支付金额
        refundTradingChannels: null, // 支付方式
        refundOrderStatus: null // 订单状态
      }
    }
  },
  data() {
    return {
      showRequestModal: false,
      formItem: {
          orderStatus: 4, // 4同意退款 2驳回
          auditorReason: ''
      },
      formItemRule: [],
      disabled: false
    }
  },
  methods: {
    handleFeeBack() {
        if (!this.id) {
          this.$Message.error('缺少参数 id');
        } else if (this.formItem.orderStatus === 2 && !this.formItem.auditorReason) {
            this.$Message.error('请填写驳回原因');
        } else {
            this.refundOperateAuditor();
        }
    },
    handleBack() {
      this.$router.push({
        path: '/index/orders/feedBackMgt/list',
        query: this.$route.query
      });
    },
    refundOperateAuditor() {
        this.disabled = true
        const reqBody = { ...this.formItem };
        // debugger;
        this.$axios.post(api.RefundAuditor.replace('{id}', this.id), reqBody).then(resp => {
          if(resp.data.code){
            this.disabled = false
            this.$Message.success('操作成功');
            // 弹窗不关闭直接切换页面会影响新页面body样式
            this.showRequestModal = false;
            this.$nextTick(() => {
                this.onSuccess || this.handleBack();
            }, 100);
          } else {
            this.$Message.error(resp.data.message);
          }           
        }).catch(err => {
          this.disabled = false
        });
    }
  },
  watch: {
    feeBackInfo(n) {
      // debugger;
    }
  }
}
</script>

<style scoped>
.feeBackBtn {
  display: inline-block;
  margin-right: 10px;
}
.btn {
  width: 75px;
  height: 35px;
}
</style>
